約 1,829,287 件
https://w.atwiki.jp/araiguma/pages/41.html
ここは表示しないよ(stylilshとかで使うと広告とかを消せる) div #ads{ display none; } class="example なら必ず背景が画像になるときのcss .example { background #FFFEF0 url(img/example.gif) no-repeat; border 1px solid #DDD0C0; font-size small; padding 15px; } @wikiの広告を消すためのcss div #atwiki_google_afc_1{ display none; } div#ads{ display none!important; } リンク とほほのスタイルシート入門 http //www.tohoho-web.com/css/index.html zen garden http //www.csszengarden.com/tr/japanese/ css実践講座 http //css.uka-p.com/
https://w.atwiki.jp/saicron/pages/31.html
CSS ドキュメント (XHTML) All Standards and Drafts (W3C) HTMLからXHTMLへ（基礎知識） (Web Frontier) ドキュメント (CSS) CSS とはなんだろうか - セレクタの説明など。 リファレンス XHTMLのタグ一覧 (HAC Design) スタイルシートリファレンス（目的別） プロパティ セレクタ (CSS) プロパティ一覧 スタイルシートリファレンス（目的別） +サイズの単位… サイズの単位 相対単位 em 現在のフォントサイズを1とした相対指定 ex 現在の英字の"x"のサイズを1とした相対指定 % 現在のフォントサイズや画面サイズを100%とした相対指定 絶対単位 px ピクセルで指定 pt ポイントで指定 pc パイカで指定 in インチで指定 cm センチメートルで指定 mm ミリメートルで指定 (1pt = 1/72in , 1pc = 1/6in , 1in = 2.54cm) インチやセンチメートルなどでの指定は画面上ではかなり不正確です。また、厳密には%は別物なのですが、説明上ここに入れておきます。ときどき%が使えない事があるのはそのためで、リファレンスではその都度「(%は無効)」と表記しています。 CSSリファレンス (実験室 P) +セレクタの種類… セレクタの種類 名前 セレクタの書式 スタイルを適用する対象 使用例 要素型セレクタ 要素名 指定した要素 p {color blue;} 全称セレクタ * すべての要素 * {color blue;} classセレクタ 要素名.クラス名 クラス名を付けた要素 p.sample {color blue;} idセレクタ 要素名#id名 id名を付けた要素 div#sample {color blue;} 擬似クラス 要素名 link 未訪問のリンク先 a link {color blue;} 要素名 visited 訪問済のリンク先 a visited {color blue;} 要素名 hover カーソルが乗っている要素 a hover {color blue;} 要素名 active クリック中の要素 a active {color blue;} 要素名 focus フォーカスされている要素 input focus {background blue;} 要素名 first-child 要素内の最初の子要素 p first-child {color blue;} 要素名 lang 特定言語の要素 p lang(en) {color blue;} 擬似要素 要素名 first-line 要素の最初の一行 p first-line {color blue;} 要素名 first-letter 要素の最初の一文字 p first-letter {color blue;} 要素名 before 要素の直前 blockquote before {content "『";} 要素名 after 要素の直後 blockquote after {content "』";} 属性セレクタ 要素名[属性名] 特定の属性を持つ指定要素 a[target] {color blue;} 要素名[属性名= "属性値"] 特定の属性値を持つ指定要素 a[target]="_blank" {color blue;} 要素名[属性名~= "属性値"] 属性値候補と一致した要素 p[class~="sample"] {color blue;} 複数のセレクタ セレクタ,セレクタ 複数のセレクタ h1, h2 {color blue;} 子孫セレクタ セレクタ セレクタ 下の階層の子孫要素 p strong {color blue;} 子供セレクタ セレクタ セレクタ 直下の階層の子供要素 p strong {color blue;} 隣接セレクタ セレクタ+セレクタ 直後に隣接している要素 h1 + p {color blue;} セレクタの種類 (HTMLクイックリファレンス) レイアウト (CSS) +margin、padding、borderの関係… margin、padding、borderの関係 マージン (Web Site 制作支援) パッディング (Web Site 制作支援) ボーダー (Web Site 制作支援) paddingとmargin相殺 (adiary official website) +divをfloatさせる… divをfloatさせる 上下に並んだ＜div＞..＜/div＞を左右に配置させる Webページの横幅を指定する 「float」によるCSSレイアウトの崩れを防ぐ 「border」によるCSSレイアウトの崩れを防ぐ 「auto」でWebページを中央表示させる +画面の幅… 画面の幅 width, min-width, max-width border, padding, margin PC画面解像度 +どのくらいの幅がいいか？ ウチでホームページを制作する場合は、固定幅の場合は大体横幅は７００ｐｘ（ピクセル）の後半から８００ｐｘの前半くらいでレイアウトします。 そして横幅だけで見ても、やはり１位は1024で、全体の約42％を占めています。２位は僅差で1280、これは約38％。この２サイズだけで、80％を占めていることになります。すべての画面に最適にすることは難しいので、やはり大は小を兼ね、「より狭くて数の多いものに合わせる」のがよいです。つまり、1024の横幅でおさまるように設計すれば、1280以上の解像度で見ても横スクロールは出ないので、1024以上の幅にならないようにすることが必要だということになります。 ブラウザには枠やスクロールが存在するのでSVGA(横幅800px×高さ600px)のユーザー用に800px限界に作ってしまうと、横スクロールが表示されてしまいます。実際の表示可能領域は760px×420程度ですので注意してください。 横幅は、自由に決めても良いですが、800pxを超えると、パソコンによっては横スクロールがでることがあり、とても見にくくなるので今回は750pxにしました。縦幅は、コンテンツの量によって自動で変化させるので、指定しません。 +CSSで画面の最小・最大幅を指定する min-width 800px; /* 800px以下にならない。800px以下の画面ではスクロールバーが出る */ max-width 1000px; /* 1000px以上にならない。 */ DIVを垂直方向に中央寄せするCSSサンプル - phpspot開発日誌 position 表示位置の調整（position） - WEB工房 きくちゃん position - World Wide Web Guide画像を自由に配置するサンプル positionプロパティによる段組の基本 - CSSデザインサンプル position absoluteについて - CSS Layout background (CSS) +背景画像の固定… 背景画像の固定 まとめ background-attachment scrollの場合、背景画像の基点は要素の左上端になる。 background-attachment fixed の場合、背景画像の基点は表示領域の左上端になる(背景画像は表示領域に対して固定される)。 background-attachment fixedの場合、背景画像は表示領域に対して固定される background-attachment fixed 指定(背景画像の固定) (もうパンツはかない) overflow 半角文字列は折り返さないが、全角文字列は折り返す。 XHTML1.1 +テーブル… テーブル XHTML1.1での表は、XHTMLではなく、CSSでborderなどを記述しなくてはいけない。 CSSを使った見栄えの良い表組み（table） - バシャログ 表タイトルの位置を指定する - TAG index CSSのテクニック スタイルシートの技 - Web Frontier + h1 に画像を使う… h1 に画像を使う 『display noneの利用 = 検索エンジンスパム』 ではない - Google Wysz 「display none」と「visibility hidden」と「text-indent」の違い display none; 要素を非表示にし、要素の描画領域は確保されません。 visibility hidden; 要素を不可視にし、要素の描画領域は確保されます 。内容を透明にして表示するという感じです。 text-indent -9999px; テキストを画面の外にすっ飛ばすということです。 「display none」や「visibility hidden」や「text-indent」はスパム？ +画像の枠を消す… 画像の枠を消す +img要素で… a img { border-style none; } +クラスで… .no_border { border-style none; } img src="～" ait="banner" class="no_border" / +CSSで垂直中央に表示する… CSSで垂直中央に表示する CSSで垂直中央を実装する 背景画像を中央に固定 ソフトウェア +... ez-HTML (Web Frontier)
https://w.atwiki.jp/you-matu/pages/54.html
CSSレイアウト実践講座 商用利用可能なCSSテンプレート｜Htmlテンプレート bkanklink CSSでレイアウトするなら絶対覚えておきたい配置のルール http //kachibito.net/web-design/12-study-css-technique.html
https://w.atwiki.jp/false999/pages/16.html
CSSメモ link rel="stylesheet" href="*.css" CSSファイルを読み込める 画像の中央揃えに手間取ったので、メモ CSSだけで画像を上下中央に配置する が非常に参考になった。 imgタグをdivで囲み画像をdivの中央に表示できる。 css内で、divとimgに次の要素を与えることで、できた。 実際には、クラスやidを使ってより範囲を絞った方がよい。 div { display table-cell; text-align center; vertical-align middle; } div img { vertical-align middle; }
https://w.atwiki.jp/cz8686/pages/14.html
[CSS] コメント用 CSSクラス STYLE TYPE="text/css" !-- .comment{ background-color #EDF0F3;border-color black;border-style dashed;} .comment{ font-size 10pt;border-width 1px;padding 5px;} -- /STYLE DIV CLASS="COMMENT" コメントを記入 /DIV [CSS] フォームボタン .button_class1 { width 70; height 14pt; font-size 9pt; border 2px solid #505050;} .button_class2 { height 14pt; font-size 9pt; border 2px solid #505050;} [CSS] 右詰入力テキストフォーム .form_class2 { border 1px solid #505050; } .form_class2 { background-color #FFFFFF;} .form_class2 { font-size 9pt} .form_class2 { text-align right } .form_class2 { ime-mode disabled } .form_class3 { border 1px solid #505050; } .form_class3 { background-color #FFE8E8;} .form_class3 { font-size 9pt} .form_class3 { text-align right } .form_class3 { ime-mode disabled } [CSS] 検索結果テーブル用 CSSクラス .list_tbl2 { border 1px solid #808080; } .list_tbl2 TH { height 15pt; border 1px solid #808080; } .list_tbl2 TH { background-color #EBF8D6 } .list_tbl2 TD { height 10pt; border 1px solid #808080; } .list_tbl2 TD { font-size 10pt;white-space nowrap; } .list_tbl2 TABLE { border 0px; } .list_tbl2 TABLE TD { border 0px; } .list_tbl2 TABLE TH { border 0px; } [CSS]入力フォームでのＩＭＥ禁止 style="ime-mode disabled;"
https://w.atwiki.jp/yuto51/pages/22.html
CSSの編集について CSSをいじるとこのwikiのデザインを好きに変える事が出来ます。が、管理人がCSSについて知識が無いため、やりたいという方がいたらお任せしたいと思います。 CSSのカスタマイズ CSSのカスタマイズには管理者権限が必要です。変更を希望する場合は管理人yuto51までお知らせください。 CSSのHTML構造 現在わかっている新デフォルト(オレンジ色のやつね)のHTML構造を載せておきます。変更の際に参考にしてください。 body ├#top（空） └#wrapper（全体囲み） ├#head_editmenu（ログイン） └#wrapper2（全体囲み） ├#header, #header2（タイトル） │└h1.sitename（サイト名） │ └span.pagename（ページ名） ├#content（メイン及びメニューの全体囲み） │├#main（メイン囲み） ││├.pageinfo（ページ編集） ││├#mainbody, #mainbody2（本文囲み） ││├.pageinfo（トラックバック, リンク元） ││├#ad（広告） ││├#attach（添付ファイル一覧） ││└footname（注釈） │└#menu（メニュー囲み） │ └#menubody, #menubody2（上記と同じ） ├#foot_editmenu（下部編集メニュー） └#footer（RSSと@wikiリンク）
https://w.atwiki.jp/alicesystem/pages/57.html
CSS ＠Wikiで使っているCSSを改造したものです。 表示確認はある程度していますが、ちゃんと表示できないものがあるかもしれませんので、あらかじめご了承ください。 CSSの編集は自己責任でお願いします。 CSS ヘッドエディット（改）2005.07.29 新シンプル3段組（改）2005.07.31
https://w.atwiki.jp/igmjapan/pages/19.html
設定項のstylesheetにCSSのスタイルシートを設定することが出来るが、ここに記述することでも適用可能。 例 背景、フォント、テキストの色 CSS #game { background cornflowerblue; font-family "Times New Roman",Times,serif; color black; } 背景縁取り CSS .thing { border-radius 8px; background rgba(255,255,255,0.5); } アイコンのサイズを変える CSS .thing-icon,.particle { width 64px; height 64px; } まだ購入できないものにぼかしをかける ※#game.filtersOnを有効にしておく必要あり CSS #game.filtersOn .thing.cantAfford.notOwned { filter blur(3px); }
https://w.atwiki.jp/wiki11_hamuinu/pages/23.html
メニュー トップページ HTML総合 CSS htmlプラグインエラー このプラグインを使うにはこのページの編集権限を「管理者のみ」に設定してください。 CSS CSSの裏技
https://w.atwiki.jp/hgsk/pages/28.html
CSS フレームワーク YUI YUI Blueprint CSS BlueprintCSS version 0.8 CheatSheet Blueprint Grid CSS Generator